<template>
  <ul>
    <li
      v-for="(item, index) in dataArr"
      @click="handlerClick(item)"
      :class="{'current':item===itemClick,item}"
    >{{ item }}</li>
  </ul>
  <a href="javascript:;" v-if="prevItem" @click="handlerClickPrev">上一篇：{{prevItem}}</a>
  <h1>{{itemClick}}</h1>
  <a href="javascript:;" v-if="nextItem" @click="handlerClickNext">下一篇：{{nextItem}}</a>
</template>
<script setup>
// 获取vue api
import { ref, reactive } from "vue";
// 定义数据
let dataArr = reactive(["第一", "第二", "第三", "第四", "第五"]);
// 定义当前选中的item
let itemClick = ref(null);
// 获取点击项的索引
let itemIndex = ref(null);
// 获取上一篇项
let prevItem = ref(null);
// 获取下一篇项
let nextItem = ref(null);

// 点击的每一项事件
function handlerClick(item) {
  // 设置当前选中的item赋值给itemClick
  itemClick.value = item;
  // 重要
  commonFn();
}

// 点击上一项将上一项设置为当前选中的item
function handlerClickPrev() {
  itemClick.value = prevItem.value;
  commonFn();
}
// 点击下一项将下一项设置为当前选中的item
function handlerClickNext() {
  itemClick.value = nextItem.value;
  commonFn();
}

// 公共方法 上下项赋值（上下篇）
function commonFn() {
  // 检测当前项在数组中是否存在，存在则获取索引   indexOf---查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1
  itemIndex.value = dataArr.indexOf(itemClick.value);
  //  获取上一项item
  prevItem.value = dataArr[itemIndex.value - 1];
  //  获取下一项item
  nextItem.value = dataArr[itemIndex.value + 1];
}
</script>
<style scoped>
.item {
  width: 300px;
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin: 10px auto;
}
.item:hover {
  background-color: tomato;
}
.current {
  background-color: tomato;
}
</style>
